<template>

    <div class="columns">

        <div class="card-content column">
            <h1 class="has-text-centered">{{season.title + season.seriesName}}</h1>
            <router-view></router-view>

            <div class="ep">
                <router-link :to="{ name: 'ShowEpisode', params: { episodeId: episode.episodeSid }}" v-for="episode in episodes" :key="episode.episode" class="button is-black ep-button ">{{episode.episode}}</router-link>
            </div>
            <div class="content">
                {{season.brief}}
            </div>
        </div>
        <div class="card-image column is-one-third">
            <figure class="image">
                <img :src="season.cover" :alt="season.seriesName">
            </figure>
            <div class="ep">
                <router-link :to="{ name: 'Show', params: { showId: seasonItem.id }}" v-for="seasonItem in season.seasonList" :key="seasonItem.id" class="button is-red ep-button ">第{{seasonItem.seasonNo}}季</router-link>
            </div>
        </div>

    </div>


</template>
<script>
    import {api} from '@/tools/api'
    export default {
        name: 'show',
        data () {
            return {
                season: {},
                episodes:[]
            }
        },
        watch: {
            '$route.params.showId': 'fetchData',
        },
        methods: {
            fetchData() {
                let that = this
                let showId = this.$route.params.showId
                api.get('/rrv/season/' + showId)
                    .then(function (response) {
                        var season = response.data.data.season;
                        that.episodes = season.playUrlList.sort(function (a, b) {
                            return parseInt(a.episode) - parseInt(b.episode)
                        });
                        that.season = season
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },

        created(){
            this.fetchData()
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .ep-button {
        margin: 0.2rem;
    }
</style>
